<template>
  <div class="search-container">
    <!-- 表单的用处：在手机端访问时，输入法键盘里会出现 搜索确认按钮 -->
    <form action="/">
      <van-search
        v-model="searchKey"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @clear="isShowResult = false"
        @focus="isShowResult = false"
      >
        <!-- 回退按钮 -->
        <van-icon name="arrow-left" slot="left" @click="$router.push('/')" />
      </van-search>
    </form>
    <!-- 搜索结果 -->
    <SearchResult v-if="isShowResult" :searchKey="searchKey" />
    <!-- 搜索建议 -->
    <SearchSuggestion
      @setKeyword="setKeyWord"
      :keyword="searchKey"
      v-else-if="searchKey"
    />
    <!-- 搜索历史 -->
    <SearchHistory v-else @sonSearch="onSearch" :historyList="historyList" />
  </div>
</template>

<script>
import SearchHistory from './components/search-history.vue';
import SearchSuggestion from './components/search-suggestion.vue';
import SearchResult from './components/search-result.vue';

// 导入 存取 localStorage 方法
import { setItem, getItem } from '@/utils/storage.js';

export default {
  name: 'search',
  props: {},
  data() {
    return {
      // 搜索框 文字
      searchKey: '',
      // 是否 显示 结果组件
      isShowResult: false,
      // 搜索历史关键字
      historyList: getItem(this.$conf.SEARCH_HISTORY) || [],
    };
  },
  methods: {
    // 0.子组件 选中 建议关键字----------
    setKeyWord(newWord) {
      // 将 被选中的 关键字 设置给 搜索框
      this.searchKey = newWord;
      // 显示 结果组件，隐藏 建议组件
      this.isShowResult = true;
    },

    // 1.搜索框回车触发事件--------------
    onSearch(kw) {
      this.searchKey = kw;
      // a.检查 当前关键字 是否 在 数组中存在，如果存在，则删除之前的，重新添加新的
      const delIndex = this.historyList.findIndex((x) => x === kw);
      // 如果 存在，则 先删除 数组中原来的关键字
      if (delIndex > -1) {
        this.historyList.splice(delIndex, 1);
      }
      // b.将关键字 添加到数组中
      this.historyList.unshift(kw);

      // 显示 搜索结果组件
      this.isShowResult = true;
    },
    // 2.点击取消按钮事件--------------
    onCancel() {
      // 关闭 结果组件
      this.isShowResult = false;
    },
  },
  computed: {},
  watch: {
    // 侦听 搜索历史 数组，一旦发生改变，就保存到 本地
    historyList(newHistoryList) {
      setItem(this.$conf.SEARCH_HISTORY, newHistoryList);
    },
  },
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult,
  },

  // activated() {
  //   console.log('activated->search');
  // },
  // deactivated() {
  //   console.log('deactivated->search');
  // },
};
</script>

<style lang="less" scoped>
.search-container {
  .van-search {
    background-color: #0094ff;
    .van-search__action {
      background-color: #0094ff;
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
      font-size: 28px;
      margin-right: 5px;
    }
  }
}
</style>
